<template>
  <div class="app-container" >
    <div class="check-top">
      <el-select v-model="form.stockId" filterable clearable placeholder="请选择待盘仓库" @change="stockChange">
        <el-option v-for="s in stockList" :value="s.stockId" :label="s.stockName" />
      </el-select>

      <div v-if="stockDetail" class="detail-info">
        <div class="row-info">仓库名: {{stockDetail.stockName}}</div>
        <div class="row-info">已存数: {{stockDetail.savesNum}}</div>
        <div>

          <el-button
            type="success"
            plain
            icon="el-icon-folder"
            size="mini"
            @click="saveCheckLog"
          >保存</el-button>

          <el-button
            type="warning"
            plain
            icon="el-icon-download"
            size="mini"
            @click="handleExport"
          >导出</el-button>
        </div>
      </div>
    </div>

    <div class="body-list">
      <div class="list-div">
        <div class="list-title">
          <span>待盘列表</span>
          <span>({{oneList.length}})</span>
          <span style="margin-left: 100px">
            <el-input v-model="goodsId"
                      @keyup.enter.native="checkKeyUp"
                      placeholder="请输入商品编码" style="width: 200px" />
          </span>
        </div>

        <div style="height: 550px;overflow: auto;">
          <div class="list-info" v-for="row in oneList">
            <div style="margin-right: 50px">{{row.goodsId}}</div>
            <div>
              <div>型号: {{row.goodsName}}</div>
              <div>规格: {{row.printing}}</div>
              <div>IMEI: {{row.goodsSn}}</div>
            </div>
          </div>
        </div>

      </div>

      <div class="list-div">
        <div class="list-title">
          <span>已盘列表</span>
          <span>({{twoList.length}})</span>
        </div>

        <div style="height: 550px;overflow: auto;">
          <div class="list-info" v-for="row in twoList">
            <div style="margin-right: 50px">{{row.goodsId}}</div>
            <div>
              <div>型号: {{row.goodsName}}</div>
              <div>规格: {{row.printing}}</div>
              <div>IMEI: {{row.goodsSn}}</div>
            </div>
          </div>
        </div>
      </div>

      <div class="list-div">
        <div class="list-title">
          <span>异常列表</span>
          <span>({{threeList.length}})</span>
        </div>

        <div style="height: 550px;overflow: auto;">
          <div class="list-info" v-for="row in threeList">
            <div style="margin-right: 50px">{{row.goodsId}}</div>
            <div>
              <div>型号: {{row.goodsName}}</div>
              <div>规格: {{row.printing}}</div>
              <div>IMEI: {{row.goodsSn}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {listStockPower} from "@/api/recovery/stock"
import {voidListGoods} from "@/api/recovery/goods";
import $const from "@/utils/websocket/ServerPath";
import {export_json_to_excel} from "@/lib/Export2Excel";
import {addCheckLog} from "@/api/recovery/check-log"
export default {
  name: "check",
  data() {
    return {
      /* 表单数据*/
      form: {
        stockId: null
      },
      goodsId: null,
      stockList: [],
      stockDetail: null,
      /* 带盘列表*/
      oneList: [],
      /* 已盘列表*/
      twoList: [],
      /* 异常列表*/
      threeList: []
    }
  },
  created() {
    this.getStockList();
  },
  methods: {
    /* 保存log*/
    saveCheckLog() {
      this.$confirm("确定保存当前盘库记录吗？", '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let goodsIds = [];
        this.oneList.forEach( g => {
          goodsIds.push(g.goodsId)
        })
        const params = {
          goodsIds: goodsIds.toString(),
          checkNo: this.twoList.length,
          abnormalNo: this.threeList.length,
          stockId: this.stockDetail.stockId,
          stockName: this.stockDetail.stockName
        }
        return addCheckLog(params);
      }).then(res => {
        this.msgSuccess("保存成功！");
      })
    },
    handleExport() {
      let t = new Date().getTime();
      let a = t + "未盘列表";
      let b = t + "异常列表";
      if(this.oneList.length > 0) {
        this.sendExport(this.oneList, a);
      }

      this.sendExport(this.threeList, b);
    },
    sendExport(list, name) {
      require.ensure([], () => {
        const {export_json_to_excel } = require('@/lib/Export2Excel.js')
        const tHeader = ['商品编码','型号', '规格', 'IMEI'];
        const f = ['goodsId', 'goodsName', 'printing', 'goodsSn']
        const data = this.formatJson(f, list);
        export_json_to_excel(tHeader, data, name);
      })
    },
    formatJson(f,j){
      console.info(f)
      return j.map(v => f.map(j=> v[j]))
    },
    /* */
    checkKeyUp() {
      console.log("")
      if(this.goodsId == null || this.goodsId === "") {
        return;
      }
      let bool = true;    //没有找到
      for(let i = 0; i < this.oneList.length; i++) {
        if(this.goodsId === this.oneList[i].goodsId) {
          bool = false;
          this.twoList.unshift(this.oneList[i]);
          this.oneList.splice(i, 1)
          let successAudio = new Audio($const.WORK_SERVER + "/profile/success.wav"); //新订单铃声
          successAudio.play();
          break;
        }
      }
      if(bool) {
        this.$message({ showClose: true, message: "没有在本仓库中找到这个商品信息哦！", type: "warning" });
        let errorAudio = new Audio($const.WORK_SERVER + "/profile/error.wav"); //新订单铃声
        errorAudio.play();
      }
      this.goodsId = null;
    },
    /* 初始化盘库列表*/
    stockListInit() {
      if(this.stockDetail == null) {
        return
      }
      const params = {
        goodsStep: 4,
        stockId: this.stockDetail.stockId
      }
      voidListGoods(params).then(res => {
        this.oneList = [];
        this.twoList = [];
        this.threeList = [];
        res.rows.forEach(s => {
          if(s.goodsStatus === 1) {
            this.oneList.push(s);
          }else {
            this.threeList.push(s);
          }
        })
      })
    },
    /* 选择仓库*/
    stockChange(e) {
      this.$confirm('确定更换仓库吗？', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: "warning"
      }).then(() => {
        //获取当前选中 仓库信息
        this.stockList.forEach(it => {
          if(it.stockId === e) {
            this.stockDetail = it;
          }
        })
        this.form.stockId = null
        this.stockListInit();
      })
    },
    /* 获取当前角色可用仓库*/
    getStockList() {
      listStockPower({}).then(res => {
        this.stockList = res.rows;
      })
    },
  },
  beforeCreate() {
    this.$nextTick(() => {
      document.body.setAttribute('style', 'background-color: #F2F6FC')
    })
  },
  beforeDestroy() {
    this.$nextTick(() => {
      document.body.setAttribute('style', '');
    })
  }
}
</script>

<style scoped>
  .check-top {
    background-color: #FFFFFF;
    padding: 10px;
    height: 100px;
  }
  .detail-info {
    margin-top: 10px;
    font-size: 20px;
    color: #606266;
    display: flex;
    flex-direction: row;
  }
  .row-info {
    margin-right: 40px;
  }
  .body-list {
    margin-top: 20px;
    display: flex;
    flex-direction: row;
  }
  .list-div {
    width: 32%;
    height: 600px;
    margin-right: 20px;
    background-color: #FFFFFF;
  }
  .list-title {
    border-bottom: 1px solid #DCDFE6;
    height: 50px;
    color: #606266;
    font-size: 20px;
    line-height: 50px;
    padding-left: 20px;
  }
  .list-info {
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid #E4E7ED;
    font-size: 14px;
    padding: 10px;
    align-items: center;
  }
</style>
